import React, { useState } from 'react';
import { Card, Input, Button, Flex } from 'antd';
import styles from './index.module.scss';

const Search = ({ loading, onSearch, title }) => {
    const [keyword, setKeyWord] = useState();

    const handleAddParams = () => {
        onSearch({
            keyword,
            params: 'abc',
        });
    };

    return (
        <Card title={title} className={styles.card}>
            <Flex justify="flex-start" gap="middle">
                <Input
                    value={keyword}
                    onChange={(e) => setKeyWord(e.target.value)}
                    placeholder="输入名称搜索..."
                    style={{ width: 304 }}
                />
                <Button
                    type="primary"
                    loading={loading}
                    onClick={() => {
                        onSearch({ keyword });
                    }}
                >
                    搜索

                </Button>
                <Button
                    onClick={handleAddParams}
                >
                    加个参数
                </Button>
            </Flex>
        </Card>
    );
};

export default Search;
